// 组件：树
/*
    参数说明-属性：
    1.treeData：展示数据（array）
    2.treeEmptyText:内容为空的时候展示的文本(String)
    3.treeNodeKey：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的(String)
    4.treeRenderAfterExpand:是否在第一次展开某个树节点后才渲染其子节点(boolean)
    5.treeHighlightCurrent:是否高亮当前选中节点，默认值是 false(boolean)
    6.treeDefaultExpandAll:是否默认展开所有节点(boolean)
    7.treeExpandOnClickNode:是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点(boolean)
    8.treeCheckOnClickNode:是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。(boolean)
    9.treeDefaultExpandedKeys:默认展开的节点的 key 的数组(array)
    10.treeShowCheckbox:节点是否可被选择(boolean)
    11.treeCheckStrictly:在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false(boolean)
    12.treeDefaultCheckedKeys:默认勾选的节点的 key 的数组(array)
    13.treeAccordion:是否每次只打开一个同级树节点展开(boolean)
    14.treeIndent:相邻级节点间的水平缩进，单位为像素(number)
    15.treeIconClass:自定义树节点的图标(string)
    16.treeFilterText：对树节点进行筛选操作(string)
    17.treeNodeClickFunName:节点点击回调函数的函数名（示例：@trNodeClick="treeNodeClick" treeNodeClickFunName="trNodeClick"）
      返回参数：s：有复选框时，选中节点的信息,
                a：点击节点在data中对应的对象,
                b：节点对应的 Node
    18.treeCheckChangeFunName:节点选中状态发生变化时的回调函数的函数名（示例：@trCheckChange="treeCheckChange" treeCheckChangeFunName="trCheckChange"）
      返回参数：a：传递给 data 属性的数组中该节点所对应的对象,
                b：节点本身是否被选中,
                c：节点的子树中是否有被选中的节点
                说明：现在返回参数报错（TypeError: Cannot read property 'toLowerCase' of undefined）不知道啥原因，暂时不返回
    19.treeCheckFunName:当复选框被点击的时候触发回调函数的函数名（示例：@trCheck="treeCheck" treeCheckFunName="trCheck"）
      返回参数：a:传递给 data 属性的数组中该节点所对应的对象
                b:树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
    参数说明-事件：
    1.node-click:节点被点击时的回调(共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。)
    2.check-change：节点选中状态发生变化时的回调（共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点）
    3.check：当复选框被点击的时候触发（共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，
    包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性）
*/
<template>
  <div>
    <el-tree 
      :data="treeData" 
      :empty-text="treeEmptyText" 
      :node-key="treeNodeKey" 
      :render-after-expand="treeRenderAfterExpand" 
      :highlight-current="treeHighlightCurrent" 
      :default-expand-all="treeDefaultExpandAll" 
      :expand-on-click-node="treeExpandOnClickNode" 
      :check-on-click-node="treeCheckOnClickNode" 
      :default-expanded-keys="treeDefaultExpandedKeys" 
      :show-checkbox="treeShowCheckbox" 
      :check-strictly="treeCheckStrictly" 
      :default-checked-keys="treeDefaultCheckedKeys" 
      :accordion="treeAccordion" 
      :indent="treeIndent" 
      :icon-class="treeIconClass" 
      :filter-node-method="filterNode"
      :ismultiple="ismultiple"
      @node-click="nodeClick" 
      @check-change="checkChange" 
      @check="check"
      :props="defaultProps" 
      ref="modelTree">
    </el-tree>
  </div>
</template>
 
<script>
export default {
  name: "KtTree",
  props: {
    treeData: {
      type: Array
    },
    treeEmptyText: {
      type: String,
      default: '暂无数据'
    },
    treeNodeKey: {
      type: String
    },
    treeRenderAfterExpand: {
      type: Boolean,
      default: true
    },
    treeHighlightCurrent: {
      type: Boolean,
      default: false
    },
    treeDefaultExpandAll: {
      type: Boolean,
      default: false
    },
    treeExpandOnClickNode: {
      type: Boolean,
      default: true
    },
    treeCheckOnClickNode: {
      type: Boolean,
      default: false
    },
    treeDefaultExpandedKeys: {
      type: Array
    },
    treeShowCheckbox: {
      type: Boolean,
      default: false
    },
    treeCheckStrictly: {
      type: Boolean,
      default: false
    },
    treeDefaultCheckedKeys: {
      type: Array
    },
    treeAccordion: {
      type: Boolean,
      default: false
    },
    treeIndent: {
      type: Number,
      default: 16
    },
    treeIconClass: {
      type: String
    },
    treeFilterText: {
      type: String
    },
    treeNodeClickFunName: {
      type: String
    },
    treeCheckChangeFunName: {
      type: String
    },
    treeCheckFunName: {
      type: String
    },
    ismultiple: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      checked: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick (a, b, c) {
      if (!this.treeNodeClickFunName || this.treeNodeClickFunName === '') 
        return
      let s = this.$refs.modelTree.getCheckedNodes()
      this.$emit(this.treeNodeClickFunName, s, a, b)
    }, 

    checkChange (data, checked, indeterminate) {
      if (this.ismultiple) {
        // 多选
        if (!this.treeCheckChangeFunName || this.treeCheckChangeFunName === '') 
          return
        this.$emit(this.treeCheckChangeFunName, data, checked, indeterminate)

      } else {
        // 单选
        let {id} = data
        let index = this.checked.indexOf(id)
        // 当前节点不在this.checked中,且当前节点为选中状态
        if (index < 0 && this.checked.length && checked) {
          this.$message.warning('只能选中一个节点')
          this.$refs.modelTree.setChecked(data, false) // 取消当前节点的选中状态
          return
        }
      // 当前节点在this.checked中,当前节点为未选中状态(主动去掉当前选中状态)
        if (!checked && index >= 0 && this.checked.length) {
          this.checked = []
          return
        }
        // 当前节点不在this.checked(长度为0)中,当前节点为选中状态,this.checked中存储当前节点id
        if (index < 0 && !this.checked.length && checked) {
          this.checked.push(id)
        }
      }
      
    },
    
    check (a, b) {
      if (!this.treeCheckFunName || this.treeCheckFunName === '') 
        return
      this.$emit(this.treeCheckFunName, a, b)
    },

    
  },
  computed: {},
 
  mounted: function () {
 
  },
 
  watch: {
    treeFilterText (val) {
      this.$refs.modelTree.filter(val)
    }
  }
}
</script>
 
<style></style>